<template>
	<view class="content">
		<view class="con-bg"></view>
		<view class="desc-con">
			<view class="qus-con">
				<view style="text-align: justify;line-height: 42rpx;">
					为提高医院的医疗服务质量，营造更好的就医环境，我们敬请您利用几分钟时间填写本问卷的每一个问题，请您根据亲身感受，对您接触的医护人员的服务进行评价，如果您不方便，可由您的亲友或监护人协助您填写本问卷。
					敬祝您早日康复，感谢您的支持！
				</view>
			</view>
			<view v-for="(item,index) in questionList" :key="index">
				<view class="qus-con" v-if="item.type===1">
					<view>{{item.title}}</view>
					<view style="margin-top: 23rpx;">
						<u-radio-group size="29rpx" v-model="item.userAnswer" placement="row" activeColor="#05A2FF">
							<u-radio v-for="(itema, indexa) in item.optionList" :customStyle="{marginRight: '33rpx'}"
								:key="indexa" :label="itema.content" :name="itema.content">
							</u-radio>
						</u-radio-group>
					</view>
					<!-- <view v-if="item.userAnswer === '否' && index === 0"
						style="margin-top: 23rpx;display: flex;align-items: flex-end;">
						<view>大约是第几次？</view>
						<view style="width: 140rpx;margin-left: 15rpx;"><u--input placeholder="请输入" fontSize="27rpx"
								border="bottom" v-model="item.explain"></u--input></view>
						<view>次</view>
					</view>
					<view v-if="item.userAnswer === '不满意' && index === 5"
						style="margin-top: 23rpx;display: flex;align-items: flex-end;">
						<view style="flex-shrink: 0;">请填写不满意科室：</view>
						<view style="width: 300rpx;margin-left: 15rpx;"><u--input placeholder="请输入" fontSize="27rpx"
								border="bottom" v-model="item.explain"></u--input></view>

					</view> -->
				</view>
				<view class="qus-con" style="padding-right: 0;" v-if="item.type===2">
					<view>{{item.title}}</view>
					<view style="margin-top: 23rpx;">
						<u-checkbox-group size="29rpx" v-model="item.userAnswer" placement="row" shape="circle"
							activeColor="#05A2FF">
							<u-checkbox :customStyle="{width:'218rpx',marginBottom: '23rpx'}"
								v-for="(itema, indexa) in item.optionList" :key="indexa" :label="itema.content"
								:name="itema.content">
							</u-checkbox>
						</u-checkbox-group>
					</view>
					<view style="display: flex;align-items: flex-end;">
						<view style="flex-shrink: 0;">其他：</view>
						<view style="width: 530rpx;margin-left: 8rpx;"><u--input placeholder="请输入" fontSize="27rpx"
								border="bottom" v-model="item.explain"></u--input></view>
					</view>
				</view>
				<view class="qus-con" v-if="item.type===3">
					<view>{{item.title}}</view>
					<view style="margin-top: 23rpx;">
						<u-radio-group size="29rpx" v-model="item.userAnswer" placement="row" activeColor="#05A2FF">
							<u-radio v-for="(itema, indexa) in item.optionList" :customStyle="{marginRight: '33rpx'}"
								:key="indexa" :label="itema.content" :name="itema.content">
							</u-radio>
						</u-radio-group>
					</view>

				</view>
				<view class="qus-con" v-if="item.type===4">
					<view>{{item.title}}</view>
					<view style="margin-top: 23rpx;">
						<u--textarea v-model="item.userAnswer" placeholder="请输入内容"></u--textarea>
					</view>

				</view>
			</view>
			<view class="qus-but" @click="submitForm">
				提交
			</view>
		</view>
		<view class="qus-bom">

		</view>
	</view>
</template>

<script>
	import {
		questionApi
	} from "@/api/user"
	export default {
		data() {
			return {
				name: '',
				questionList: [{
						"title": "1.当您到护士站办理入院手续时，对护理人员的接待是否满意？",
						"type": 1,
						"optionList": [{
							"content": "是"
						}, {
							"content": "否"
						}],
						"userAnswer": "",
						"explain": ""
					}, {
						"title": "2.入院时护士是否为您介绍病区环境、设施等（如呼叫器、床栏的使用）？",
						"type": 1,
						"optionList": [{
							"content": "是"
						}, {
							"content": "否"
						}],
						"userAnswer": "",
						"explain": ""
					}, {
						"title": "3.住院期间护士是否为您介绍主管医生、护士长、责任护士?",
						"type": 1,
						"optionList": [{
							"content": "是"
						}, {
							"content": "否"
						}],
						"userAnswer": "",
						"explain": ""
					}, {
						"title": "4.住院期间，护士是否为您介绍安全注意事项（如财务保管、禁烟、禁用电器等）？",
						"type": 1,
						"optionList": [{
							"content": "是"
						}, {
							"content": "否"
						}],
						"userAnswer": "",
						"explain": ""
					}, {
						"title": "5.住院期间，护士长是否主动自我介绍，及时处理您的意见？",
						"type": 1,
						"optionList": [{
							"content": "是"
						}, {
							"content": "否"
						}],
						"userAnswer": "",
						"explain": ""
					}, {
						"title": "6.住院期间，护士是否经常保持亲切、热情的态度？",
						"type": 1,
						"optionList": [{
							"content": "是"
						}, {
							"content": "否"
						}],
						"userAnswer": "",
						"explain": ""
					}, {
						"title": "7.当您有疑问或困难时，护士能否耐心解答并给予帮助？",
						"type": 1,
						"optionList": [{
							"content": "是"
						}, {
							"content": "否"
						}],
						"userAnswer": "",
						"explain": ""
					}, {
						"title": "8.护士是否向您讲解疾病相关知识及注意事项？",
						"type": 1,
						"optionList": [{
							"content": "是"
						}, {
							"content": "否"
						}],
						"userAnswer": "",
						"explain": ""
					}, {
						"title": "9.护士是否向您讲解药物、检查的相关知识及注意事项？",
						"type": 1,
						"optionList": [{
							"content": "是"
						}, {
							"content": "否"
						}],
						"userAnswer": "",
						"explain": ""
					},
					{
						"title": "10.手术患者：护士是否向您讲解手术前后相关知识及注意事项？（未手术者无需选择）",
						"type": 1,
						"optionList": [{
							"content": "是"
						}, {
							"content": "否"
						}],
						"userAnswer": "",
						"explain": ""
					},
					{
						"title": "11.护士是否向您说明饮食的要求，并给予相应指导？",
						"type": 1,
						"optionList": [{
							"content": "是"
						}, {
							"content": "否"
						}],
						"userAnswer": "",
						"explain": ""
					}, {
						"title": "12.护士是否向您经常巡视病房，及时接应呼叫器？",
						"type": 1,
						"optionList": [{
							"content": "是"
						}, {
							"content": "否"
						}],
						"userAnswer": "",
						"explain": ""
					}, {
						"title": "13.您所在的病房环境是否安静、整洁、床单位是否干净？",
						"type": 1,
						"optionList": [{
							"content": "是"
						}, {
							"content": "否"
						}],
						"userAnswer": "",
						"explain": ""
					}, {
						"title": "14.您对护士的技术操作（如输液、注射、抽血）是否满意？",
						"type": 1,
						"optionList": [{
							"content": "是"
						}, {
							"content": "否"
						}],
						"userAnswer": "",
						"explain": ""
					}, {
						"title": "15.当您生活不能自理时，护士能否协助生活护理或指导您个人清洁卫生？（不需要者可不选择）",
						"type": 1,
						"optionList": [{
							"content": "是"
						}, {
							"content": "否"
						}],
						"userAnswer": "",
						"explain": ""
					}, {
						"title": "16.为您进行隐私部位治疗或操作时，能否提供适当的遮挡？",
						"type": 1,
						"optionList": [{
							"content": "是"
						}, {
							"content": "否"
						}],
						"userAnswer": "",
						"explain": ""
					}, {
						"title": "17.护士操作前后，是否坚持使用“请”“谢谢”等礼貌用语?",
						"type": 1,
						"optionList": [{
							"content": "是"
						}, {
							"content": "否"
						}],
						"userAnswer": "",
						"explain": ""
					},
					{
						"title": "18.您对护理工作的总体评价？",
						"type": 1,
						"optionList": [{
							"content": "满意"
						}, {
							"content": "不满意"
						}],
						"userAnswer": "",
						"explain": ""
					},



					{
						"title": "您最满意的护士：",
						"type": 4,
						"userAnswer": "",
						"explain": ""
					},
					{
						"title": "您的意见和建议：",
						"type": 4,
						"userAnswer": "",
						"explain": ""
					},
				],
			}
		},
		onLoad(option) {
			this.name = option.name
			if (option.name) {
				uni.setNavigationBarTitle({
					title: `问卷调查(${this.name})`
				});
			}

		},
		methods: {
			async submitForm() {
				console.log(this.questionList);
				for (let i = 0; i < this.questionList.length; i++) {
					if (!this.questionList[i].userAnswer && i != 14) {
						console.log(i);
						uni.showToast({
							title: '请把问卷填写完整',
							icon: 'none',
							duration: 2000
						})
						return
					}

				}
				const res = await questionApi({
					askType: 2,
					userId: 0,
					ask: JSON.stringify(this.questionList),
					createBy: this.name
				})
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				});

			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		height: 100%;
		padding-top: 35rpx;
		box-sizing: border-box;

	}

	.qus-bom {
		height: calc(31rpx + env(safe-area-inset-bottom)/2);
	}

	.con-bg {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100vw;
		height: 100%;
		background-image: url('#{$IMG_URL}bgqus.png');
		background-repeat: no-repeat;
		background-size: cover;
	}

	.desc-con {
		position: relative;
		z-index: 2;
		margin: 0 auto;
		width: 688rpx;
		font-size: 27rpx;
		color: #000000;
	}

	.qus-con {
		width: 688rpx;
		padding: 31rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 19rpx;
		margin-bottom: 23rpx;
	}

	.qus-con ::v-deep .u-input {
		padding: 0px 6px !important;
	}

	.qus-con ::v-deep .u-checkbox-group--row {
		display: flex !important;
		flex-wrap: wrap !important;
	}

	.qus-con ::v-deep .u-checkbox-group--row .u-checkbox>uni-text {
		color: #000000 !important;
		font-size: 27rpx !important;
	}

	.qus-con ::v-deep .u-radio-group--row .u-radio>uni-text {
		color: #000000 !important;
		font-size: 27rpx !important;
	}

	.qus-but {
		width: 688rpx;
		height: 85rpx;
		background: #05A2FF;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		font-size: 31rpx;
	}
</style>